import React from 'react'
import './edit.css'
import Header from '@common/header'
import { Tabs } from 'antd'
import { EditOutlined } from '@ant-design/icons'

class Edit extends React.Component {

  state = {
    headerTitle: '完善项目信息',
    headerOptions: [
      { name: '首页', path: '/home' },
      { name: '项目库' },
      { name: '项目管理', path: 'project/manage' },
      { name: '新增项目' },
    ]
  }

  callback = (key) => {
    console.log(key)
  }

  // 预览数据
  previewData = () => {
    console.log('previewData')
  }
  
  render() {
    let { headerTitle, headerOptions } = this.state
    return (
      <div className="_edit">
        <Header title={ headerTitle } options={ headerOptions }></Header>
        <Tabs defaultActiveKey="1" onChange={ this.callback }>
          <Tabs.TabPane tab="1.项目基本信息" key="1">
            <div className="edit-container">
              <div className="edit-section title_bar">
                <div className="title_bar-left">
                  <div className="title">XXXXX信息系统运维（系统运维）</div>
                  <EditOutlined />
                </div>
                <div className="title_bar-right">
                  <div className="accruing_amounts">累计总金额： 0.00 元</div>
                  <div className="preview" onClick={ this.previewData }>
                    <img className="preview-icon" src="/images/preview.png" alt=""/>
                    <div className="preview-text">预览</div>
                  </div>
                </div>
              </div>
              <div className="edit-section">
                1
              </div>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="2.资金测算情况" key="2">
            <div className="edit-container">
              <div className="edit-section title_bar">
                <div className="title_bar-left">
                  <div className="title">XXXXX信息系统运维（系统运维）</div>
                  <EditOutlined />
                </div>
                <div className="title_bar-right">
                  <div className="accruing_amounts">累计总金额： 0.00 元</div>
                  <div className="preview" onClick={ this.previewData }>
                    <img className="preview-icon" src="/images/preview.png" alt=""/>
                    <div className="preview-text">预览</div>
                  </div>
                </div>
              </div>
              <div className="edit-section">
                2
              </div>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="3.项目绩效信息" key="3">
            <div className="edit-container">
              <div className="edit-section title_bar">
                <div className="title_bar-left">
                  <div className="title">XXXXX信息系统运维（系统运维）</div>
                  <EditOutlined />
                </div>
                <div className="title_bar-right">
                  <div className="accruing_amounts">累计总金额： 0.00 元</div>
                  <div className="preview" onClick={ this.previewData }>
                    <img className="preview-icon" src="/images/preview.png" alt=""/>
                    <div className="preview-text">预览</div>
                  </div>
                </div>
              </div>
              <div className="edit-section">
                3
              </div>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="4.采购预算信息" key="4">
            <div className="edit-container">
              <div className="edit-section title_bar">
                <div className="title_bar-left">
                  <div className="title">XXXXX信息系统运维（系统运维）</div>
                  <EditOutlined />
                </div>
                <div className="title_bar-right">
                  <div className="accruing_amounts">累计总金额： 0.00 元</div>
                  <div className="preview" onClick={ this.previewData }>
                    <img className="preview-icon" src="/images/preview.png" alt=""/>
                    <div className="preview-text">预览</div>
                  </div>
                </div>
              </div>
              <div className="edit-section">
                4
              </div>
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="5.增量资产计划" key="5">
            <div className="edit-container">
              <div className="edit-section title_bar">
                <div className="title_bar-left">
                  <div className="title">XXXXX信息系统运维（系统运维）</div>
                  <EditOutlined />
                </div>
                <div className="title_bar-right">
                  <div className="accruing_amounts">累计总金额： 0.00 元</div>
                  <div className="preview" onClick={ this.previewData }>
                    <img className="preview-icon" src="/images/preview.png" alt=""/>
                    <div className="preview-text">预览</div>
                  </div>
                </div>
              </div>
              <div className="edit-section">
                5
              </div>
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    )
  }

}

export default Edit